
<template>
  <el-form :inline="true" :model="info" class="demo-form-inline">
    <el-form-item>
      <el-input v-model="info.postNameNo" placeholder="请输入岗位名称/编号" clearable />
    </el-form-item>
    <!-- <el-form-item style="width: 200px;">
      <el-select
        v-model="info.organizeNo"
        placeholder="请选择组织"
        clearable
      >
        <el-option label="" value="请选择" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" @click="GetPost">查询</el-button>
      <el-button type="" @click="Rest()">重置</el-button>
    </el-form-item>
  </el-form>
  <el-form-item>
    <el-button type="success" @click="OpenAdd">新增</el-button>
  </el-form-item>
  <el-table :data="post.a" border style="width: 100%;height: 500px;">
    <el-table-column type="index" label="序号" width="60px"/>
    <el-table-column prop="postName" label="岗位名称" />
    <el-table-column prop="postNo" label="岗位编号" />
    <el-table-column prop="organizeName" label="所属组织" />
    <el-table-column prop="" label="操作" >
        <template v-slot="scope">
            <el-button type="primary" @click="OpenEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="DeletePost(scope.row)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>

  <!-- 新增岗位 对话框 -->
  <el-dialog v-model="addDialogVisible" :title="dialogTitle" width="520px">
    <el-form ref="addFormRef" :model="addForm" label-width="96px">
      <el-form-item label="岗位名称" prop="postName">
        <el-input v-model="addForm.postName" placeholder="请输入岗位名称" />
      </el-form-item>
      <el-form-item label="岗位编号" prop="postNo">
        <el-input v-model="addForm.postNo" placeholder="请输入岗位编号" :disabled="isEdit" />
      </el-form-item>
      <el-form-item label="所属组织" prop="organizeNo">
        <el-select v-model="addForm.organizeNo" placeholder="请选择所属组织" style="width:100%">
          <el-option label="请选择" value="" />
          <el-option v-for="o in organizeOptions" :key="o.organizeNo" :label="o.organizeName" :value="o.organizeNo" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addDialogVisible=false">取消</el-button>
      <el-button type="primary" :loading="addSubmitting" @click="isEdit ? UpdatePost() : AddPost()">确定</el-button>
    </template>
  </el-dialog>
  <el-pagination
      style="margin-top: 15px;"
      v-model:current-page="list.index"
      v-model:page-size="list.size"
      :page-sizes="[3,5,8,10]"
      :background="true"
      prev-text="上一页"
      next-text="下一页"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.count"
    />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useCounterStore} from '@/stores/counter'
// @ts-ignore
 import { getReadClient, getWriteClient } from '@/Urls/AxiosHelper'
const store=useCounterStore();
const read = getReadClient(0)
const write = getWriteClient(0)
let post:any=reactive({
    a:[]
})
let info:any=reactive({
    postNameNo:'',
    organizeNo:''
})
 // 新增对话框与表单
 const addDialogVisible = ref(false)
 const addSubmitting = ref(false)
 const addFormRef = ref()
const isEdit = ref(false)
const dialogTitle = ref('新增岗位')
 let addForm:any = reactive({
    id:'',
   postName:'',
   postNo:'',
   organizeNo:''
 })
 const organizeOptions:any = ref([])
let list:any=reactive({
    index:1,
    size:3,
    count:0,
    page:0
})
const GetPost=()=>{
  read({
    url:'sysread/api/Post/GetPost',
    method:'get',
    params:{
      PostNameNo:info.postNameNo,
      OrganizeNo:info.organizeNo,
      Index:list.index,
      Size:list.size
    }
  })
  .then(res=>{
    post.a = res?.data?.data?.data || []
    list.count = res?.data?.data?.totalCount || 0
    list.page = res?.data?.data?.totalPage || 0
  })
}

const GetOrganizeOptions=()=>{
  read({ url:'sysread/api/Organize/GetOrganize', method:'get' })
  .then(res=>{ organizeOptions.value = res.data?.data || [] })
}

const OpenAdd=()=>{
  isEdit.value = false
  dialogTitle.value = '新增岗位'
  addForm.postName=''
  addForm.postNo=''
  addForm.organizeNo=''
  if(!organizeOptions.value?.length){ GetOrganizeOptions() }
  addDialogVisible.value=true
}

const AddPost=()=>{
  if(!addForm.postName){ return ElMessage.warning('请输入岗位名称') }
  if(!addForm.postNo){ return ElMessage.warning('请输入岗位编号') }
  if(!addForm.organizeNo){ return ElMessage.warning('请选择所属组织') }
  addSubmitting.value = true
  write({
    url:'syswrite/api/Post/AddPost',
    method:'post',
    data:addForm
  }).then((res)=>{
    if(res.data.code==200){
      ElMessage.success('新增成功')
      addDialogVisible.value=false
      GetPost()
    }
    else{
      ElMessage.error(res.data.message)
    }
  }).finally(()=>{ addSubmitting.value=false })
}

const OpenEdit=(row:any)=>{
  isEdit.value = true
  dialogTitle.value = '编辑岗位'
  addForm.id=row.id
  addForm.postName = row.postName
  addForm.postNo = row.postNo
  addForm.organizeNo = row.organizeNo
  if(!organizeOptions.value?.length){ GetOrganizeOptions() }
  addDialogVisible.value = true
}

const UpdatePost=()=>{
  if(!addForm.postName){ return ElMessage.warning('请输入岗位名称') }
  if(!addForm.postNo){ return ElMessage.warning('请输入岗位编号') }
  if(!addForm.organizeNo){ return ElMessage.warning('请选择所属组织') }
  addSubmitting.value = true
  write({
    url:'syswrite/api/Post/UpdatePost',
    method:'post',
    data:addForm
  }).then((res)=>{
    if(res.data.code==200){
      ElMessage.success('更新成功')
      addDialogVisible.value=false
      GetPost()
    }
    else{
      ElMessage.error(res.data.message)
    }
  }).finally(()=>{ addSubmitting.value=false })
}

const DeletePost=(row:any)=>{
  ElMessageBox.confirm(`确定删除“${row.postName}”吗？`, '删除确认', {
    type:'warning',
    confirmButtonText:'确定',
    cancelButtonText:'取消'
  }).then(()=>{
    write({
      url:'syswrite/api/Post/DeletePost',
      method:'post',
      params:{ Id: row.id }
    }).then((res)=>{
      if(res.data.code==200){
        ElMessage.success('删除成功')
        GetPost()
      }
      else{
        ElMessage.error(res.data.message)
      }
    })
  }).catch(()=>{})
}
watch(list,()=>{
    GetPost()
},{deep:true})
const Rest=()=>{
    info.postNameNo='',
    info.organizeNo=''
}
onMounted(()=>{
    GetPost();
     GetOrganizeOptions();
})
</script>
